<template>
 
    <!-- 级联组件
     options绑定需要展示的树形数组
     props绑定需要展示的数据对象的节点
     value记录当前选中部门的id
     -->
     <el-cascader
     :value="value"
     size="mini"
    :options="treelist"
    :props="props" 
    @change="changevalue"
    />
  
</template>

<script>
import { getDepartment } from '@/api/department'
import { transitionTree } from '@/utils'
export default {
    props: {
        value:{
            type:Number,
            default:null
        }
    },
data () {
    return {
        treelist:[],
        props: {
            // 需要展示的内容
            label:'name',
            // 与options绑定的数据对象中需要存储的数据
            value:'id'
        }
    }
},
created () {
  this.getDepartment()  
},
methods: {
    async getDepartment() {
       this.treelist = transitionTree(await getDepartment() ,0 )
    },
    changevalue(data){
    //   console.log(data);
    if(data.length > 0){
        // 监听cascader组件的change时间 默认的形参中就意味着通过props存储的value属性的值
        // 这里需要拿到的是数组中的一个元素也就是最后选中的部门id
        this.$emit('input',data[data.length -1])
    }else{
        this.$emit('input',null)
    }
    }
}
}
</script>

<style>

</style>